<template>
    <div class="box">
        <h1>学生信息录入</h1>
        <div class="tent">
            <div>
                <label>学号：<input type="text" v-model="form.stu_id" /></label><br />
                <label>姓名：<input type="text" v-model="form.stu_name" /></label><br />
                <label>性别：<input type="text" v-model="form.stu_sex" /></label><br />
                <el-select v-model="form.stu_jg">
                    <el-option v-for="item in options" :key="item.value" :value="item.label">{{item.label}}</el-option>
                </el-select>
                <label>出生日期：<input type="date" v-model="form.stu_date" /></label><br />
                <label>爱好：<input type="text" v-model="form.stu_hobby" /></label><br />
                <label>男女朋友：<input type="text" v-model="form.stu_gbf" /></label><br>
                <!-- <label>头像：<input type="text" v-model="form.stu_head_img" /></label><br> -->
                <Hand></Hand>
                <el-button type="info" round @click="submit">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import request from '@/api/request.js';
import Hand from '@/components/Hand'
export default {
    components:{
        Hand
    },
    data() {
        return {
            form: {
                stu_id: "",
                stu_name: "",
                stu_sex: "",
                stu_jg: "",
                stu_date: "",
                stu_hobby: "",
                stu_gbf: "",
                stu_head_img: ""
            },
            options: [{
                value: '选项1',
                label: '北京'
            }, {
                value: '选项2',
                label: '河南'
            }, {
                value: '选项3',
                label: '河北'
            }, {
                value: '选项4',
                label: '安徽'
            }, {
                value: '选项5',
                label: '广州'
            }],
            
        };
    },
    methods: {
        async submit() {
            let result = await request({
                method: 'post', url: '/student_info', arg: {
                    stu_id: this.form.stu_id,
                    stu_name: this.form.stu_name,
                    stu_sex: this.form.stu_sex,
                    stu_jg: this.form.stu_jg,
                    stu_date: this.form.stu_date,
                    stu_hobby: this.form.stu_hobby,
                    stu_gbf: this.form.stu_gbf,
                    stu_head_img: this.form.stu_head_img,
                }, headerType: 'form'
            });
            console.log(result);

        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;

    .tent {
        width: 600px;
        height: 500px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;

        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>